<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="_c" style="border: 1px solid #000;" width="400" height="400"></canvas>

    <script>
        var log = console.log.bind(console)
        var SettingCanvas = ()=>{
            var canvas = document.querySelector('#_c')
            var ctx = canvas.getContext('2d')
        }
        var Paddle = () => {
            var image = imageFromPath('paddle.png')
        
            var defaultProps = {
                image:image,
                x: 250,
                y: 250,
                speed: 10,
            }
            defaultProps.moveLeft = () => {
                defaultProps.x -= defaultProps.speed
            }
            defaultProps.moveRight = () => {
                defaultProps.x += defaultProps.speed
            }

            return defaultProps
        }

        var imageFromPath = (path) => {
            var img = new Image()
            img.src = path
            return img
        }
        var __main = () => {
            var game = SettingCanvas()
            var paddle = Paddle()
            
            
            
            var left = false
            var right = false

           
            const _movepic = (e) => {
                // log(e)
                var k = e.key

                if (k === 'a') {
                    left = true
                } else if (k === 'd') {
                    right = true
                }
            }

            const _clearpic = (e) => {
                // log(e)
                var k = e.key

                if (k === 'a') {
                    left = false
                } else if (k === 'd') {
                    right = false
                }
            }


            window.addEventListener('keydown', _movepic)

            window.addEventListener('keyup', _clearpic)

            setInterval(() => {
                
                if (left) {
                    paddle.moveLeft()
                } else if (right) {
                    paddle.moveRight()
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.drawImage(paddle.image, paddle.x, paddle.y)
            }, 1000/30)
        }
        __main() 
    </script>
</body>

</html>